<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>03-案例-样式操作</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>

        .box {
            width: 100px;
            height: 100px;
            background-color: #369;
            margin: 20px;
            position: relative;
            top: 0;
            left: 0;

            transition: none;
        }

        .trans {
            transition: top 1.2s ease-in;
        }

        button {
            outline: none !important;
            margin: 0 20px;
        }

    </style>
</head>
<body>
    <!-- 
        总结
            a. 本案例需要给元素添加定位，通过动态的样式让元素发生位移
            b. 案例核心，通过过渡的方式监听了元素的移动，在移动过程中有丝滑的效果
                         而过渡执行完毕之后，需要给元素再清空样式，方便后续再次执行
            c. 在本案例中，主要用到了  onwebkittransitionend  这个方法
                 很遗憾这个事件在vue模板中使用不到，后期的组件中可以使用
                 解决办法： 使用原生的方式给元素暂时注册一下事件，通过vm操作元素的属性清空数据
     -->
    <div id="app">
        <div class="container">
            <h3>案例-样式操作</h3>
            <hr>
            <!-- 如果声明的数据在发生改变的同时，页面没有任何地方使用数据，则不会看到有变化，但其实数据在发生改变 -->
            <!-- {{ styleObj.top }} -->
            <button class="btn btn-warning" @click="demo = styleObj; str = 'trans'">移动盒子</button>

            <!-- 原生的dom有一个专门的事件监听过渡结束 onwebkittransitionend -->
            <!-- 在vue中使用监听过渡的事件，直接使用 @transitionend -->
            <div class="box" :class="str" :style="demo" @transitionend="fn"></div>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#app',
            data: {
                str: '',
                demo: null,
                styleObj: {
                    top: '220px'
                }
            },
            methods: {
                fn() {
                    // alert('过渡结束了！')
                    this.demo = null
                    this.str = ''
                }
            }
        })


        // var box = document.querySelector('.box')
        // // box.onwebkittransitionend = function() {
        // //     console.log(100);
        // // }
        // // 监听过渡结束的，每一次元素执行完了过渡都会调用这个事件
        // box.addEventListener('webkitTransitionEnd', function() {
        //     // console.log(10086);
        //     vm.str = ''
        //     vm.demo = null
        // })
    </script>
</body>
</html>